<template>
  <div>
    <el-form ref="form" :model="formData" class="el-form">
      <el-form-item :label="materialNoLabel" prop="materialNo" class="w50p" :rules="[{ required: true, message: '请选择物料' }]">
        <el-select v-model="formData.materialNo" filterable clearable placeholder="请选择物料" :disabled="!!selectedItem.materialNo" @change="changeMat">
          <el-option v-for="item in objList" :key="item.materialNo" :label="item.materialName" :value="item.materialNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="物料类型：" prop="materialNo" class="w50p" :rules="[{ required: true, message: '请选择物料' }]">
        <el-input :value="currentMat.material && currentMat.material.materialTypeName" disabled />
      </el-form-item>
      <el-form-item :label="numLabel" prop="num" class="w50p" :rules="[{ required: true, message: '请输入数量' }]">
        <el-input-number :precision="0" v-model="formData.num" type="number" :min="0" placeholder="请输入数量" :disabled="showType === 'detail'" />
      </el-form-item>
      <el-form-item label="单位：" prop="materialNo" class="w50p" :rules="[{ required: true, message: '请选择物料' }]">
        <el-input :value="currentMat.material && currentMat.material.unitName" disabled />
      </el-form-item>
      <el-form-item label="规格参数：" class="w50p">
        <el-input :value="currentMat.material && currentMat.material.materialspec" disabled />
      </el-form-item>
      <el-form-item label="型号参数：" class="w50p">
        <el-input :value="currentMat.material && currentMat.material.model" disabled />
      </el-form-item>
      <template v-if="type !== 'MATERIAL_REQUISITION'">
        <el-form-item label="生产时间：" prop="productionDate" class="w50p" :rules="[{ required: true, message: '请选择生产日期' }]">
          <el-date-picker v-model="formData.productionDate" :disabled="showType === 'detail'" type="date" placeholder="请选择生产日期" />
        </el-form-item>
        <el-form-item label="失效时间：" prop="expirationDate" class="w50p" :rules="[{ required: true, message: '请选择失效日期' }]">
          <el-date-picker v-model="formData.expirationDate" :disabled="showType === 'detail'" type="date" placeholder="请选择失效日期" />
        </el-form-item>
        <el-form-item label="入库类型：" prop="receiptType" class="w50p" :rules="[{ required: true, message: '请选择失效日期' }]">
          <el-select v-model="formData.receiptType" :disabled="showType === 'detail'" filterable clearable placeholder="请选择入库类型">
            <el-option v-for="item in receiptTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: Boolean,
    selectedItem: {
      type: Object,
      default: null
    },
    taskDetail: {
      type: Object,
      default: null
    },
    showType: {
      type: String,
      default: 'addEdit'
    },
    type: {
      type: String,
      default: 'MATERIAL_REQUISITION'
    }
  },
  data() {
    return {
      receiptTypes: [
        {
          label: '成品',
          value: 'FINISHED'
        },
        {
          label: '半成品',
          value: 'SEMI'
        },
        {
          label: '原料',
          value: 'RAW'
        }
      ],
      formDataDefault: {
        materialNo: '',
        num: '',
        productionDate: '',
        expirationDate: '',
        receiptType: 'RAW'
      },
      formData: {},
      currentMat: {}
    };
  },
  computed: {
    objList() {
      const { taskDetail, type } = this;
      let list = [];
      if (taskDetail) {
        if (type === 'RECEIPT_ORDER') {
          list = [...taskDetail.taskRawMaterialList, { ...taskDetail.product, materialName: taskDetail.product.material.materialName }];
          list = [...new Map(list.map(item => [item.materialNo, item])).values()];
        } else {
          list = taskDetail.taskRawMaterialList;
        }
      }
      return list;
    },
    materialNoLabel() {
      let label = '';
      const { type } = this;
      if (type === 'MATERIAL_REQUISITION') {
        label = '出库货名：';
      } else {
        label = '入库货名：';
      }
      return label;
    },
    numLabel() {
      let label = '';
      const { type } = this;
      if (type === 'MATERIAL_REQUISITION') {
        label = '领料数量：';
      } else {
        label = '入库数量：';
      }
      return label;
    }
  },
  watch: {},
  created() {
    this.reset();
    this.init();
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = JSON.parse(JSON.stringify(this.formDataDefault));
    },
    init() {
      const { selectedItem, formData, type } = this;
      if (selectedItem) {
        for (const key in formData) {
          if (Object.hasOwnProperty.call(formData, key)) {
            formData[key] = selectedItem[key];
          }
        }
        if (selectedItem.materialNo) {
          this.changeMat(selectedItem.materialNo);
        }
      } else {
        if (type === 'RECEIPT_ORDER') {
          this.formData.receiptType = 'SEMI';
        } else {
          this.formData.receiptType = 'RAW';
        }
      }
    },
    validateForm() {
      const { formData } = this;
      const paylod = JSON.parse(JSON.stringify(formData));
      return new Promise((resolve, _) => {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            paylod.productionDate = this.$moment(paylod.productionDate).format('YYYY-MM-DD HH:mm:ss');
            paylod.expirationDate = this.$moment(paylod.expirationDate).format('YYYY-MM-DD HH:mm:ss');
            resolve(paylod);
          } else {
            resolve(null);
          }
        });
      });
    },
    changeMat(v) {
      const { objList } = this;
      const find = objList.find(i => i.materialNo === v);
      console.log(find);
      this.currentMat = find;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-input-number {
  width: 100%;
}
</style>
